/* eslint-disable */
var webpack = require('webpack');
var webpackDevMiddleware = require('webpack-dev-middleware');
var webpackHotMiddleware = require('webpack-hot-middleware');
var config = require('./webpack.config');

var app = new (require('express'))();
var port = 3000;

var compiler = webpack(config);
// Webpack本身只有打包功能，但是把这个中间件连入Express服务器后，就可以将Webpack的打包功能与Express服务器的资源服务功能合二为一
// Express服务器通过该中间件完成打包工作，并将打包好的资源读到内存中，接下来我们就可以通过Express服务器的端口来访问这些资源了。不仅如此，该中间件该可以监视代码变动，一旦代码变动，就会停止提供旧版的资源服务，等到编译完成后继续提供新的资源服务。
app.use(webpackDevMiddleware(compiler, { noInfo: true, publicPath: config.output.publicPath }));
// 更新代码后保留程序状态
app.use(webpackHotMiddleware(compiler));

app.get("/", function(req, res) {
    res.sendFile(__dirname + '/index.html')
});

app.listen(port, function(error) {
    if (error) {
        console.error(error)
    } else {
        console.info("==> 🌎  Listening on port %s. Open up http://localhost:%s/ in your browser.", port, port)
    }
});



// 总结:
// 1. 因为JSX终究还是JavaScript，而class和for又是JavaScript中的保留字，所以尽管JSX中的HTML标签属性绝大多数都与HTML规范一致，但是class和for这两个属性在JSX中需要写为className和htmlFor
// 2. JSX允许在闭合标签中使用JavaScript表达式，但要被{}所包裹。
// 3. JavaScript表达式要求必须有返回值，因此无法直接使用if else语句，但是可以使用三元操作表达式以及||和＆＆这样的比较运算符来书写。如果确实需要使用if else语句，可以将其写在函数中，然后在{}中调用。
// 4. 与HTML相似，JSX中的内联样式也是通过style属性来定义的，但属性值不能是字符串而必须为对象，而且要注意对象中的属性名需要使用驼峰命
//    名法，例如需要将font-size变为fontSize。




